const { defineComponent } = require('/js-modules/common/san/san.js')
const { preStop } = require('commonFun')

const Contain = defineComponent({
    template: `
        <template>
            <ul class="yo-contain" style="left: {{ left }}px" >
                <template s-for="v in list">
                    <li class="yo-contain-item {{ activeId === v.id ? 'yo-item-active' : '' }}"  on-click="hasNodes(v, $event)">
                        <span class="yo-contain-text" title="{{ v.label }}" >{{v.label}}</span>
                        <i s-if="v.nodes && v.nodes.length > 0" class="iconfont">&#xe601;</i>
                    </li>
                </template>
            </ul>
            <template s-if="indexList.length > 0">
                <yo-this
                    defaultVal = "{{ defaultVal }}"
                    list="{{ indexList }}"
                    left = "{{ left }}"
                    preid = "{{ id }}"
                    model="{= model =}"
                    deepIndex = "{{ deepIndex }}"
                    on-change="change"></yo-this>
            </template>
        </template>
    `,
    inited () {
        {
            let indexList = this.data.get('list')
            if (!indexList || !indexList.length) return
            let deep  = indexList[0].deep || 0
            this.data.set('left', deep * 150)
            this.watch('preid', v => {
                this.data.set('indexList', [])
            })
        }
        {
            let deepIndex = this.data.get('deepIndex') || 0
            let defaultVal = this.data.get('defaultVal') || []
            if (deepIndex < defaultVal.length) {
                const list = this.data.get('list')
                for (let v of list) {
                    if (v.id === defaultVal[deepIndex].id) {
                        this.hasNodes(v)
                        break
                    }
                }
                this.data.set('deepIndex', deepIndex + 1)
            }
        }
    },
    change (model) {
        this.fire('change', model)
    },
    updateModel (v) {
        if (!v.preid) {
            this.data.set('model', [v])
            this.fire('change', [v])
        } else {
            let { model } = this.data.get()
            for (let i = 1, len = model.length; i < len; i++) {
                const item = model[i]
                if (item.deep === v.deep) {
                    model.splice(i)
                    model.push(v)
                    this.fire('change', model)
                    return this.data.set('model', model)
                }
            }
            this.fire('change', [...model, v])
            this.data.push('model', v)
        }
    },
    hasNodes (v, e) {
        preStop(e)
        if (v.disabled) return
        this.data.set('id', v.id)
        this.data.set('activeId', v.id)
        this.updateModel(v)
        if (v.nodes && v.nodes.length > 0) {
            let deep = v.deep || 0
            const nodes = v.nodes.map(item => {
                item.preid = v.id
                item.deep = deep + 1
                return item
            })
            this.data.set('indexList', nodes)
        } else {
            this.data.set('indexList', [])
        }
        return false
    },
    components: {
        'yo-this': 'self'
    },
    initData () {
        return {
            indexList: []
        }
    }
})

module.exports = Contain